import { Header } from "@/components";
import { View } from "@tarojs/components";
import style from "./index.module.scss";

export const KeyValueList = ({
  itemList,
  title,
  topAlignedFirstRow = false,
}: {
  itemList: Array<{
    leftText: string;
    middleNode?: React.ReactNode;
    middleTextTop?: string;
    middleTextBottom?: string;
    rightNode?: React.ReactNode;
    hidden?: Boolean;
  }|null>;
  title?: string;
  topAlignedFirstRow?: boolean;
}) => (
  <View className={style["orderlist"]}>
    {title && (
      <Header type="heading-n" className={style["orderlist-heading"]}>
        {title}
      </Header>
    )}
    {itemList.map((sectionItem, sectionItemIndex) => {
      if (sectionItem) {
        return (
        <View
          className={`${style["row"]} ${
            sectionItem.hidden ? style["hidden"] : ""
          }`}
          key={`${sectionItemIndex}`}
        >
          <View
            className={`${style["top"]}`}
            style={topAlignedFirstRow ? { alignItems: "start" } : {}}
          >
            <View className={style["left-center-container"]}>
              <View className={style["left-text"]}>{sectionItem.leftText}</View>
              {sectionItem.middleTextTop && (
                <View className={style["middle-text-top"]}>
                  {sectionItem.middleTextTop}
                </View>
              )}
              {/* Could also be random component */}
              {sectionItem.middleNode && sectionItem.middleNode}
            </View>
            {sectionItem.rightNode && <View>{sectionItem.rightNode}</View>}
          </View>
          {sectionItem.middleTextBottom && (
            <View className={style["bottom"]}>
              <View className={style["middle-text-bottom"]}>
                {sectionItem.middleTextBottom}
              </View>
            </View>
          )}
        </View>
      );
    }})}
  </View>
);
